<script lang="ts" setup>
import {useRoute, useRouter} from 'vue-router'
import {ref} from "vue"
import {addComment, mainattr, mainCommentPage, mainRouteDetailById, putAttr} from "../serve"
import {ElMessage} from "element-plus";
import pagination from "./pagination.vue"

const
    route = useRoute(),
    router = useRouter(),
    count = ref(1),
    itemData: any = ref({images: []}),
    load = ref(true),
    rateN = ref(5),
    tely = ref(''),
    fromData = ref({size: 5, page: 1}),
    plData: any = ref({})
;

function get() {
  if (route.query['id']) {
    mainRouteDetailById(route.query['id']).then(r => {
      if (r['images']) {
        r['images'] = JSON.parse(r['images'])
      } else {
        r['images'] = []
      }
      itemData.value = r
      getComm()
      console.table(r)
    }).catch(() => load.value = false)

  } else {
    router.push('/index')
  }
}

function getComm() {
  mainCommentPage({
    ...fromData.value,
    "type": itemData.value['type'],
    "relateId": itemData.value['routeId']
  }).then((r: any) => {
    plData.value = r
    load.value = false
  }).catch(() => load.value = false)
}

get()
setInterval(() => {
  if (itemData.value['images'].length > 0) {
    if (count.value == itemData.value['images'].length) {
      count.value = 1
      return
    }
    count.value++
  }
}, 3000)

function pat() {
  if (count.value == 1) {
    count.value = itemData.value['images'].length
  } else {
    count.value--
  }
}

function cat() {
  if (count.value == itemData.value['images'].length) {
    count.value = 1
  } else {
    count.value++
  }
}

function attrChange() {
  if (itemData.value['isCollection'] == null) {
    ElMessage({type: 'error', message: '您未登录，请先登录！', duration: 1000})
    router.push('/login').catch(() => true)
    return
  } else if (itemData.value['isCollection'] == false) {
    mainattr({relateId: itemData.value['routeId'], type: itemData.value['type']}).then(() => {
      ElMessage({type: 'success', message: '收藏成功！', duration: 1000})
      itemData.value['isCollection'] = true
    })
  } else {
    putAttr({relateId: itemData.value['routeId'], type: itemData.value['type']}).then(() => {
      ElMessage({type: 'success', message: '取消成功！', duration: 1000})
      itemData.value['isCollection'] = false
    })
  }
}

function addCommentChange() {
  addComment({
    "type": itemData.value['type'],
    "relateId": itemData.value['routeId'],
    "content": tely.value,
    "rating": rateN.value
  }).then(() => {
    ElMessage({type: 'success', message: '评论成功！', duration: 1000})
    tely.value = ''
    rateN.value = 5
    getComm()
  })
}

function sizeChange(size: number) {
  fromData.value.size = size
  getComm()
}

function currentChange(currPage: number) {
  fromData.value.page = currPage
  getComm()
}
</script>

<template>
  <el-scrollbar v-loading="load" element-loading-text="加载中...">
    <div con>
      <div style="display: flex;">
        <div class="resource-t">
          <div d-img :style="{ backgroundImage: `url(${itemData['images'][count - 1]})` }"/>
          <div class="rest-c">
            <div class="left" @click="pat">
              <el-icon color="#01A2EA" size="40">
                <ArrowLeftBold/>
              </el-icon>
            </div>
            <div class="center">
              <div v-for="(i,index) in itemData['images']" :key="index" :class="{iv:(index + 1) == count}"
                   :style="{ backgroundImage: `url(${i})` }"
                   d-img/>
            </div>
            <div class="right" @click="cat">
              <el-icon color="#01A2EA" size="40">
                <ArrowRightBold/>
              </el-icon>
            </div>
          </div>
        </div>
        <div class="resource-b">
          <div class="title">{{ itemData['title'] }}</div>
          <div class="f-title">{{ itemData['description'] }}</div>
          <div class="mk">
            <div class="top">行程概要</div>
            <div class="m-con">
              <div d-f>
                <div>{{ '行程天数' }}</div>
                <div>{{ itemData['days'] + '日游' }}</div>
              </div>
              <div d-f>
                <div style="letter-spacing: 5px;text-align: center">{{ '目的地' }}</div>
                <div>{{ itemData['destination'] }}</div>
              </div>
              <div d-f>
                <div>{{ '推荐指数' }}</div>
                <el-rate disabled size="large" v-model="itemData['recRate']"/>
              </div>
              <div d-f>
                <div>{{ '加入收藏' }}</div>
                <div>
                  <img @click="attrChange" alt="" :src="itemData['isCollection'] ? 'love1.svg':'love.svg'"/>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 分隔线 -->
      <div class="divider">
        <span class="divider-line"></span>
        <h1 class="divider-text">行程特色</h1>
        <span class="divider-line"></span>
      </div>
      <div class="route-description">
        {{ itemData['special'] }}
      </div>
      <!-- 分隔线 -->
      <div class="divider">
        <span class="divider-line"></span>
        <h1 class="divider-text">线路介绍</h1>
        <span class="divider-line"></span>
      </div>
      <div v-html="itemData['content']"/>
      <!-- 分隔线 -->
      <div class="divider">
        <span class="divider-line"></span>
        <h1 class="divider-text">留言</h1>
        <span class="divider-line"></span>
      </div>
      <el-input :rows="5" v-model="tely" placeholder="请输入留言" style="width: 60%;margin-left: 30px;"
                type="textarea"/>
      <el-rate size="large" v-model="rateN" style="margin-left: 40px;"/>
      <span class="subly" @click="addCommentChange">发送</span>
      <div v-for="(i,index) in plData['list']" lyif :key="index">
        <div :style="{ backgroundImage: `url(${i['avatar']?i['avatar']:'/Logo.svg'})` }" class="left"/>
        <div class="right">
          <div a style="font-weight: bold;"><span>{{ i['nickname'] }}</span>
            <el-rate v-model="i['rating']" size="small" style="margin-left: 15px;"/>
          </div>
          <div a>{{ i['createdAt'] }}</div>
          <div a>{{ i['content'] }}</div>
        </div>
      </div>
      <div page>
        <pagination :pageCurrent="plData?.current" :pageSize="plData?.size"
                    :small="false" :total="plData?.total"
                    class="page" @size-change="sizeChange" @current-change="currentChange"/>
      </div>
    </div>
  </el-scrollbar>
</template>

<style lang="scss" scoped>
[page] {
  padding: 20px 30px;
}

.route-description {
  margin-left: 20px;
  letter-spacing: 1px;
  width: 100%; /* 明确设置容器宽度 */
  height: auto; /* 根据内容自动调整高度 */
  word-wrap: break-word; /* 允许长单词换行 */
  overflow-wrap: anywhere; /* 在任意字符间断开（浏览器兼容性更好） */
  white-space: normal; /* 默认值：允许换行 */
}

[con] {
  width: 70%;
  //height: 900px;
  background-color: #ffffff;
  margin: 50px auto auto;
  padding-bottom: 50px;
}

.resource-t {
  width: 650px;
  //background-color: #FA9BB6;
  //height: 800px;
  [d-img] {
    width: 650px;
    //background-image: url("/img.png");
    height: 360px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    border-radius: 5px;
  }

  .rest-c {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 648px;
    height: 100px;
    border-left: #efeded 1px solid;
    border-right: #efeded 1px solid;
    border-bottom: #efeded 1px solid;

    .left, .right {
      width: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100px;
      cursor: pointer;
    }

    .center {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: start;
      gap: 20px;
      overflow: hidden;
      cursor: pointer;

      [d-img] {
        width: 120px;
        background-image: url("/img.png");
        height: 60px;
        overflow: hidden;
        background-size: cover;
        background-position: center;
        border-radius: 5px;
        gap: 20px;
      }

      .iv {
        border: 2px solid #f67272;
      }
    }


  }
}

.resource-b {
  flex: 1;
  padding-left: 30px;

  .title {
    font-weight: bold;
    font-size: 25px;
  }

  .f-title {
    margin-top: 15px;
    margin-bottom: 30px;
  }

  .mk {
    width: 100%;
    //background-color: #FA9BB6;
    height: 340px;

    .top {
      height: 65px;
      width: 100%;
      background-color: #6BC1FA;
      color: #ffffff;
      font-size: 25px;
      letter-spacing: 2px;
      text-align: center;
      line-height: 65px;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
    }

    .m-con {
      width: 100%;
      height: calc(100% - 50px);
      background-color: #DFF4FF;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      padding-bottom: 15px;

      [d-f] {
        display: flex;
        justify-content: start;
        gap: 20px;
        line-height: 30px;
        align-items: flex-start;

        div:nth-child(1) {
          background-color: #ffffff;
          padding: 10px;
          text-align: center;
          border-radius: 10px;
          font-size: 15px;
          margin-left: 20px;
        }

        div:nth-child(2) {
          margin: auto 0;
          text-align: left;
          line-height: 50px;
        }

        div:nth-child(2) img {
          cursor: pointer;
          width: 40px;
          height: 40px
        }

        div:nth-child(1), div:nth-child(2) {
          margin-top: 20px;
        }
      }
    }
  }
}

.divider {
  display: flex;
  align-items: center;
  margin: 50px 0 50px 0;
  justify-content: center;

  .divider-line {
    height: 3px;
    width: 100px;
    border-radius: 2px;
    background: #5DCDFF;
  }

  .divider-text {
    padding: 0 12px;
    //color: #8898aa;
    //font-size: 12px;
    color: #555555;
  }
}

.subly {
  margin-left: 50px;
  background-color: #5DCDFF;
  //width: 100px;
  padding: 15px 30px;
  border-radius: 10px;
  font-size: 16px;
  color: #ffffff;
  letter-spacing: 5px;
  cursor: pointer;
}

[lyif] {
  display: flex;
  justify-content: start;
  margin: 30px;
  border-bottom: 1px solid #f1f1f1;
  padding-bottom: 20px;

  .left {
    width: 60px;
    height: 60px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    border-radius: 5px;
    gap: 20px;
  }

  .right {
    flex: 1;
    font-size: 14px;
    color: #666666;
    margin-left: 15px;

    [a] {
      margin-bottom: 5px;
    }
  }
}
</style>